<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.header{
			font:"微软雅黑" 16px black;
		}
		.header h1{
			text-indent:50px;
			margin:50px; 
		}
		.header p{
			text-indent:50px;
		}
		.container{
			margin:50px auto;
			padding:30px;
		}
		.left{
			width:100%;
			float:left;
		}
		.lf-inside{
			margin-right:180px;
			border:1px solid #999;
			text-indent: 20px;
			padding:5px;
		}
		.right-img{
			width:50px;
			padding:3px;
		}
		.right-img img{
			max-width: 100%;
		}
		.right{
			border:1px solid #999;
			margin-left:-180px;
			width:120px;
			float:left;
		}
	</style>
</head>
<body>
	<div class="header">
		<h1> 左侧自适应布局</h1>
		<p><b>说明:</b> 通过左侧浮动，右侧设置一个margin-left值偏移，左偏移值为左侧的宽度,右侧宽度自动铺满，父div变化时，效果不变</p>
	</div>
		
	<div class="container">
		<div class="left">
			<div class="lf-inside">
				<p><b>说明:</b> 通过左侧浮动，右侧设置一个margin-left值偏移，左偏移值为左侧的宽度,右侧宽度自动铺满，父div变化时，效果不变</p>
			<img src="../img/b3a75cae4b7b5b42e4d0aebd0a5c9b70.jpg" alt="">
			</div>
			
		</div>
		<div class="right">
			<div class="right-img"><img src="../img/b3a75cae4b7b5b42e4d0aebd0a5c9b70.jpg" alt="">
			</div>
		</div>
	</div>
</body>
</html>
